<template>
    <div class="container">
        <mt-header title="优惠券">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="coupon">
            <div class="coupon-container" v-for="(item,index) in data" :key="index">
                <div class="coupon-content">
                    <p class="coupon-value">{{item.amount}}元</p>
                    <p class="coupon-condition">满{{item.condition}}元可用</p>
                    <p class="coupon-points">兑换所需积分：{{item.needScore}}积分</p>
                    <button @click="charge(item.id)" class="coupon-btn">立即兑换</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            data: []
        }
    },
    methods: {
        getCouponList() {
            this.$axios({
                url: this.$api.couponList,
                method: 'get',
                headers: {
                    'Content-Type': 'multipart/form-data'
                },

            }).then(res => {
                this.data = res.rows
            })
        },
        charge(id){
            this.$axios({
                url:this.$api.couponCharge,
                method:'post',
                data:{couponId:id}
            }).then(res => {
                if(res.code == 200){
                    Toast('兑换成功');
                }
            })
        }
    },
    mounted() {
        this.getCouponList()
    }
}
</script>

<style lang="scss" scoped>
.coupon-container {
	margin: 20px auto;
    width: 95%;
	// max-width: 500px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 10px;
	text-align: center;
}

.coupon-content {
	margin-top: 5px;
}

.coupon-value {
	font-size: 30px;
	color: #FF7F50;
	margin: 0;
}

.coupon-condition {
	font-size: 10px;
	color: #999;
	margin: 10px 0;
}

.coupon-points {
	font-size: 9px;
	color: #999;
	margin: 10px 0;
}

.coupon-btn {
	font-size: 10px;
	background-color: #FF7F50;
	color: white;
	border: none;
	border-radius: 5px;
	padding: 5px 20px;
	margin-top: 10px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.coupon-btn:hover {
	background-color: #FF6347;
}

</style>